<template>
  <view class="add-supplier">

    <!-- 表单内容 -->
    <uni-forms label-width="100" ref="formRef" :modelValue="formData" :rules="rules" label-position="top">
      <!-- 公司名称 -->
      <uni-forms-item label="公司名称" required name="name">
        <uni-easyinput
          v-model="formData.name"
          placeholder="请输入公司名称"
        />
      </uni-forms-item>

      <!-- 联系人 -->
      <uni-forms-item label="联系人" required name="contact">
        <uni-easyinput
          v-model="formData.contact"
          placeholder="请输入联系人姓名"
        />
      </uni-forms-item>

      <!-- 联系电话 -->
      <uni-forms-item label="联系电话" required name="phone">
        <uni-easyinput
          v-model="formData.phone"
          type="number"
          placeholder="请输入联系电话"
        />
      </uni-forms-item>

      <!-- 地址 -->
      <uni-forms-item label="地址" required name="address">
        <uni-easyinput
          v-model="formData.address"
          type="textarea"
          placeholder="请输入详细地址"
        />
      </uni-forms-item>
    </uni-forms>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="submit-btn" @click="handleSubmit">{{ isEdit ? '保存修改' : '确认添加' }}</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { supplierApi } from '@/api/supplier'

const formRef = ref(null)
const isEdit = ref(false)
const supplierId = ref('')

// 表单数据
const formData = ref({
  name: '',
  contact: '',
  phone: '',
  address: ''
})

// 表单校验规则
const rules = {
  name: {
    rules: [{
      required: true,
      errorMessage: '请输入公司名称'
    }]
  },
  contact: {
    rules: [{
      required: true,
      errorMessage: '请输入联系人姓名'
    }]
  },
  phone: {
    rules: [{
      required: true,
      errorMessage: '请输入联系电话'
    }, {
      pattern: /^1[3-9]\d{9}$/,
      errorMessage: '请输入正确的手机号'
    }]
  },
  address: {
    rules: [{
      required: true,
      errorMessage: '请输入详细地址'
    }]
  }
}

// 获取公司详情
const getSupplierDetail = async (id) => {
  try {
    const res = await supplierApi.getDetail(id)
    console.log(res)
    const detail = res
    formData.value = {
      name: detail.name,
      contact: detail.contact,
      phone: detail.phone,
      address: detail.address
    }
  } catch (error) {
    console.error('获取公司详情失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'error'
    })
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 表单校验
    await formRef.value.validate()
    
    if (isEdit.value) {
      // 更新公司
      await supplierApi.update(supplierId.value, formData.value)
      uni.showToast({
        title: '更新成功',
        icon: 'success'
      })
    } else {
      // 添加公司
      await supplierApi.add(formData.value)
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })
    }
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
    
  } catch (err) {
    console.log('操作失败', err)
    uni.showToast({
      title: isEdit.value ? '更新失败' : '添加失败',
      icon: 'error'
    })
  }
}

// 页面加载
onLoad((options) => {
  if (options.id) {
    isEdit.value = true
    supplierId.value = options.id
    getSupplierDetail(options.id)
    // 修改导航栏标题
    uni.setNavigationBarTitle({
      title: '编辑公司'
    })
  }
})
</script>

<style>
.add-supplier {
  min-height: 100vh;
  background-color: #F0F2F5;
  padding-top: var(--status-bar-height);
}

/* 头部样式 */
.header {
  background-color: #fff;
  padding: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn {
  padding: 8px;
  background: none;
  border: none;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 表单样式 */
.uni-forms {
  padding: 16px;
  background-color: #fff;
  margin-top: 12px;
}

/* 底部按钮 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
}

.submit-btn:active {
  background-color: #096dd9;
}
</style> 